

<template>
<div class="login">
  <div class="logNavTop" :style="{height: navBarHeight + 'px'}">
    <p :style="{height: statusBarHeight + 'px'}"></p>
    <p class="logNavTopIMG" @click="ruterBack()"><img src="../../../../static/images/ruterLeft.png"></p>
    <p class="logNavToptxt" :style="{height: titleBarHeight + 'px',lineHeight:titleBarHeight + 'px'}">其他手机号登录</p>
  </div>
  <p :style="{height: navBarHeight + 'px'}"></p>
<div class="codeLoginCenter">
  <p class="codeLoginCenterInput clearfix">
    <input  class="fl" type="number" maxlength="11" placeholder="请输入手机号" v-model="parameter.telphone">
    <button v-if="isTimer==1" class='fr' @click="getVerificaCode">获取验证码</button>
    <button v-else-if="isTimer==2" class='fr'>{{countDownNum}}s</button>
  </p>
  <div class="codeLoginCenterCode clearfix">
    <input class="fl" type="number" placeholder="请输入验证码" v-model="parameter.smsCode">    
  </div>
  <div class="codeLoginBtn"><button @click="logIn()">完成</button></div>
</div>
</div>
</template>

<script>
export default {    
  data(){
    return{
      parameter:{
        telphone:'',
        smsCode:'',
      },
      timer: '',//定时器名字
      countDownNum: '60',//倒计时初始值
      isTimer:1,
      statusBarHeight: "", // 状态栏高度
        titleBarHeight: "", // 标题栏高度
        navBarHeight: "", // 导航栏总高度
    }
  },
  beforeMount() {
    const self = this;
    wx.getSystemInfo({
      success(system) {
        console.log(system)
        self.statusBarHeight = system.statusBarHeight;
        let platformReg = /ios/i;
        if (platformReg.test(system.platform)) {
          self.titleBarHeight = 44;
        } else {
          self.titleBarHeight = 48;
        }
        self.navBarHeight = self.statusBarHeight + self.titleBarHeight;
        console.log(self.navBarHeight,self.statusBarHeight,self.titleBarHeight)
      }
    });
  },
  methods: {
    getVerificaCode(){
      var that=this
      if(that.parameter.telphone==''){
         wx.showToast({
            title:'手机号不能为空',
            icon: "none",
            duration: 1000
          });
          return false
      }
      if(!(/^1[3456789]\d{9}$/.test(that.parameter.telphone))){ 
          wx.showToast({
            title:'请输入正确的手机号',
            icon: "none",
            duration: 1000
          });
          return false; 
      }
      that.isTimer=2
      that.$api.user.sendSms(that.parameter).then(row=>{     
              if(row.status===0){
                wx.showToast({
                  title: '发送成功',
                  icon: "Ssuccess",
                  duration: 1000
                });             
                that.countdown()
              }else{
                wx.showToast({
                  title: row.message,
                  icon: "none",
                  duration: 1000
                });
              }
              that.common.hideToast();
          })
    },
    logIn(){
        var that=this
        if(that.parameter.telphone==''){
            wx.showToast({
                title:'手机号不能为空',
                icon: "none",
                duration: 1000
              });
              return false
          }
        if(!(/^1[3456789]\d{9}$/.test(that.parameter.telphone))){ 
            wx.showToast({
              title:'请输入正确的手机号',
              icon: "none",
              duration: 1000
            });
            return false; 
        }
        if(that.parameter.smsCode==''){
            wx.showToast({
                title:'验证码不能为空',
                icon: "none",
                duration: 1000
              });
              return false
          }
        //发起网络请求
          that.$api.user.loginBySms(that.parameter).then(row=>{     
              if(row.status===0){              
                wx.setStorageSync("uat",row.data.uat)
                if(row.data!=null&&row.data!=''&&row.data!=undefined){
                  that.$store.commit('getUserInfo',row.data);
                  that.$store.commit('uat',row.data.uat);
                }  
                wx.showToast({
                  title:'登录成功',
                  icon: "none",
                  duration: 1000,
                  success:function(){
                    
                  }
                });            
              }else{
                wx.showToast({
                  title: row.message,
                  icon: "none",
                  duration: 1000
                });
              }
              that.common.hideToast();
          })
      },
    //倒计时
    countdown(){
      let that = this;
      let countDownNum = that.countDownNum;//获取倒计时初始值
     //如果将定时器设置在外面，那么用户就看不到countDownNum的数值动态变化，所以要把定时器存进data里面
      that.timer=setInterval(function () {
        //这里把setInterval赋值给变量名为timer的变量
          //每隔一秒countDownNum就减一，实现同步
          countDownNum--;
          //然后把countDownNum存进data，好让用户知道时间在倒计着
          that.countDownNum=countDownNum
          //在倒计时还未到0时，这中间可以做其他的事情，按项目需求来
          if (countDownNum == 0) {
            //这里特别要注意，计时器是始终一直在走的，如果你的时间为0，那么就要关掉定时器！不然相当耗性能
            //因为timer是存在data里面的，所以在关掉时，也要在data里取出后再关闭
            that.isTimer=1
            clearInterval(that.timer);
            //关闭定时器之后，可作其他处理codes go here
          }
        }, 1000)
    },
    //返回返回上一页
    ruterBack(){
     wx.navigateBack({
        delta: 1
      });
    }
  }
}
</script>

<style scoped>
.logNavTop{
  width: 100%;
  position: fixed;
  z-index: 999999999;
  background: #fff;
  top: 0px;
  left: 0px;
}
.logNavTopIMG{
  width:22px;
height:22px;
  position: absolute;
  top: 50%;
  left: 15px;
}
.logNavTopIMG img{
  width:22px;
  height:22px;
} 
.logNavToptxt{
  width: 100%;
  line-height: 44px;
  text-align: center;
  font-size:16px;
font-family:PingFangSC-Medium,PingFang SC;
font-weight:500;
color:rgba(51,51,51,1);
}
.login{
  width: 100%;
  height: 100vh;
  background:rgba(247,247,247,1);
}
.codeLoginCenter{
  width: 100%;
  padding:15px;
  box-sizing: border-box;
}
.codeLoginCenterInput{
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  background: #fff;
  margin-bottom: 12px;
}

.codeLoginCenterInput input{
 border: none;
  height:32px;
 width:200px;
 font-size:15px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(179,179,179,1);
}
.codeLoginCenterInput button{
  width:100px;
  height:32px;
  background:rgba(245,243,240,1);
  border-radius:3px;
  font-size:14px;
  font-family:PingFangSC-Regular,PingFang SC;
  font-weight:400;
  color:rgba(153,150,147,1);
  line-height:32px;
}

.codeLoginCenterCode{
  width: 100%;
  padding: 15px;
  box-sizing: border-box;
  background: #fff;
  margin-bottom:30px;
}

.codeLoginCenterCode input{
  border: none;
  height:32px;
 width:100%;
 font-size:15px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(179,179,179,1);
}
.codeLoginBtn{
  width: 100%;
 height:45px;
background:rgba(204,170,126,1);
border-radius:3px;
}
.codeLoginBtn button{
  width: 100%;
 background:rgba(204,170,126,1);
  height: 45px;
  line-height: 45px;
  color: #fff;
  font-size:16px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
}
</style>
